<template>
  <view class="container">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <view class="main">
        <view class="address-item" v-for="(item, index) in dataList" :key="index" @click="toOrderComfirm(item)">
          <view class="tp">
            <!-- <image class="location-icon" src="/static/images/location2.png" mode=""></image> -->
            <view class="name">
              {{item.real_name}} {{item.phone}}
            </view>
          </view>
          <view class="middle">
            <view class="txt1">{{item.province}}/{{item.city}}/{{item.district}}</view>
            <view class="txt2">{{item.detail}}</view>
          </view>
          <view class="foot">
            <view class="foot-fl" @click.stop="open(item)">
              <image class="round-icon"
                :src="item.is_default?'/static/images/roundActive.png':'/static/images/round.png'" mode=""></image>
              <text class="defaut-address">默认地址</text>
            </view>
            <view class="foot-fr">
              <view class="foot-fr-item" style="margin-right: 60rpx;" @click.stop="edit(item)">
                <image class="edit-icon" src="/static/images/edit.png" mode=""></image>
                <text class="label">编辑</text>
              </view>
              <view class="foot-fr-item" @click.stop="remove(item)">
                <image class="edit-icon" src="/static/images/delete.png" mode=""></image>
                <text class="label">删除</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view style="width: 100%;height: 194rpx;"></view>
      <view class="footer">
        <view class="btn" @click="toAdd">
          新增地址
        </view>
      </view>
    </z-paging>
    <uv-modal ref="modal" content="确定将该地址设置为默认地址吗?" align="center" :showCancelButton="true"
      @confirm="confirm"></uv-modal>
    <uv-modal ref="modal2" content="确定删除该地址吗?" align="center" :showCancelButton="true" @confirm="confirm2"></uv-modal>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        params: {
          page: 1,
          limit: 10
        },
        dataList: [],
        oId: "",
        isPage: ""
      }
    },
    onLoad(option) {
      console.log("页面入口参数", option.isPage);
      this.isPage = option.isPage;
    },
    onShow() {
      this.$nextTick(() => {
        this.$refs.paging.refresh();
      })
    },
    methods: {
      edit(item) {
        uni.navigateTo({
          url: `/pages/mine/addressAdd?id=${item.id}`
        })
      },
      remove(item) {
        this.oId = item.id;
        this.$refs.modal2.open();
      },
      confirm2(){
        reqApi.addressDel({id: this.oId}).then(res=>{
          uni.showToast({
            title: "删除成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(() => {
            this.$refs.paging.refresh();
          }, 1500)
        })
      },
      queryList(pageNo, pageSize) {
        this.params.page = pageNo;
        this.params.limit = pageSize;
        reqApi.addressList(this.params).then(res => {
          console.log("地址列表", res);
          this.$refs.paging.complete(res.data);
        })
      },
      open(item) {
        this.oId = item.id;
        this.$refs.modal.open();
      },
      toOrderComfirm(item) {
        console.log("isPage", this.isPage);
        if (this.isPage == 'order') {
          uni.$emit("getAddress", item);
          uni.navigateBack();
        }
      },
      confirm() {
        reqApi.defaultSet({
          id: this.oId
        }).then(res => {
          uni.showToast({
            title: "默认地址设置成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(() => {
            this.$refs.paging.refresh();
          }, 1500)
        })
      },
      toAdd() {
        uni.navigateTo({
          url: "/pages/mine/addressAdd"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .footer {
    padding: 50rpx;
    box-sizing: border-box;
    background: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;

    .btn {
      width: 100%;
      height: 88rpx;
      background: #F86F03;;
      box-shadow: 0rpx 16rpx 20rpx 0rpx rgba(9, 124, 105, 0.2);
      border-radius: 48rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }
  }

  .container {
    .main {
      padding: 30rpx;
      box-sizing: border-box;

      .address-item {
        padding: 30rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 30rpx;
        margin-bottom: 30rpx;

        .tp {
          display: flex;
          align-items: center;

          .location-icon {
            width: 48rpx;
            height: 48rpx;
          }

          .name {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;
          }
        }

        .middle {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
          padding: 30rpx 0;
          box-sizing: border-box;

          .txt1 {}

          .txt2 {
            margin-top: 10rpx;
          }
        }

        .foot {
          display: flex;
          justify-content: space-between;
          padding-top: 30rpx;
          border-top: 2rpx solid #eee;

          .foot-fl {
            flex: 1;
            display: flex;
            align-items: center;

            .round-icon {
              width: 40rpx;
              height: 40rpx;
              margin-right: 20rpx;
            }

            .defaut-address {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
            }
          }

          .foot-fr {
            display: flex;

            .foot-fr-item {
              display: flex;
              align-items: center;

              .edit-icon {
                width: 36rpx;
                height: 36rpx;
              }

              .label {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
              }
            }
          }
        }
      }
    }
  }
</style>